<template>
  <div class="page-wrapper">
    <div class="wrapper">
      <a-flex
        :style="{ height: '190px', paddingLeft: '26px', lineHeight: 1, color: '#ffffff' }"
        vertical
        justify="center"
        align="flex-start"
      >
        <span :style="{ fontSize: '16px', lineHeight: '20px', marginBottom: '6px' }"
          >好友每次获得收益</span
        >
        <a-flex :style="{ padding: '5px 0', marginBottom: '16px' }" align="flex-end">
          <span :style="{ fontSize: '16px', lineHeight: '20px' }">推荐人可获得</span>
          <span :style="{ fontSize: '30px', color: '#FFF8AF', fontWeight: 'bold' }">10%</span>
          <span :style="{ fontSize: '16px', lineHeight: '20px' }">团队奖励</span>
        </a-flex>
        <a-flex
          :style="{
            height: '24px',
            borderRadius: '12px',
            padding: '5px 12px 7px',
            backgroundColor: '#ffffff',
            color: '#F3315A',
          }"
        >
          <span :style="{ fontSize: '12px' }">邀好友共建新时代全员持股商务社交平台</span>
        </a-flex>
      </a-flex>
      <a-flex class="invitation-code-wrapper" vertical justify="space-between">
        <span :style="{ fontSize: '16px', lineHeight: '22px', color: '#1B1B1B' }">我的邀请码</span>
        <a-flex :style="{ width: '100%', height: '36px' }" justify="space-between">
          <span class="invitation-code-view">T0ALC1</span>
          <span class="btn-copy">复制</span>
        </a-flex>
        <span :style="{ fontSize: '16px', lineHeight: '22px', color: '#EA224C' }">立即邀请</span>
      </a-flex>
      <div class="rule-description-wrapper">
        <div class="title">规则说明</div>
        <div class="list">
          <a-flex class="item">
            <div class="order">1</div>
            <div class="content">
              选择不同渠道分享好友邀请函，好友通过此二维码下载或填写推荐人的邀请码注册即邀请成功
            </div>
          </a-flex>
          <a-flex class="item">
            <div class="order">2</div>
            <div class="content">
              平台严禁任何作弊行为，一经发现，平台有权扣除全部奖励并永久封禁账户，由此造成的财产损失平台不负有责任。
            </div>
          </a-flex>
          <a-flex class="item">
            <div class="order">3</div>
            <div class="content">
              平台严禁任何作弊行为，一经发现，平台有权扣除全部奖励并永久封禁账户，由此造成的财产损失平台不负有责任。
            </div>
          </a-flex>
        </div>
      </div>
      <div style="height: 80px"></div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped lang="less">
.page-wrapper {
  height: 100%;
  overflow-y: auto;
}
.page-wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper {
  min-height: 100%;
  background-image: url(/@/assets/images/h5/bg-inviteFriend.png);
  background-size: 100% auto;
  background-position: 0 -88px;
  background-repeat: no-repeat;
}
.invitation-code-wrapper {
  height: 160px;
  padding: 18px 38px;
  margin: 0 12px 16px;
  border-radius: 10px;
  text-align: center;
  background-image:
    radial-gradient(circle at left center, transparent, transparent 10px, #ffffff 10px),
    radial-gradient(circle at right center, transparent, transparent 10px, #ffffff 10px);
  background-size:
    70% 100%,
    50% 100%;
  background-position:
    0% 0%,
    100% 0%;
  background-repeat: no-repeat, no-repeat;
}
.invitation-code-view {
  width: 200px;
  background-color: #e8eaf0;
  color: #000000;
  padding: 8px;
  font-size: 20px;
  line-height: 20px;
  font-weight: bold;
  letter-spacing: 0.3em;
}
.btn-copy {
  width: 50px;
  border: 1px solid #e9204b;
  color: #e9204b;
  padding: 11px 12px;
  font-size: 12px;
  line-height: 12px;
  border-radius: 6px;
}
.rule-description-wrapper {
  margin: 0 12px;
  padding: 16px 22px;
  border-radius: 10px;
  background-color: #ffffff;
  .title {
    color: #1b1b1b;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
  }
  .item + .item {
    margin-top: 16px;
  }
  .order {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    font-size: 10px;
    line-height: 1;
    background-color: #f02d56;
    margin-right: 6px;
    margin-top: 4px;
  }
  .content {
    font-size: 12px;
    line-height: 20px;
    color: #373737;
  }
}
</style>
